import { useState, useRef, useEffect } from 'react'
import { View, Video, Text, Input, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtIcon } from 'taro-ui'
import './index.scss'
import "taro-ui/dist/style/components/icon.scss";
const VideoPlayer = ({ src }) => {
    const videoRef = useRef(null)
    const [isPlaying, setIsPlaying] = useState(false)
    const [currentTime, setCurrentTime] = useState(0)
    const [duration, setDuration] = useState(0)
    const [isFullscreen, setIsFullscreen] = useState(false)
    const [danmuList, setDanmuList] = useState([])
    const [inputDanmu, setInputDanmu] = useState('')
    const [key, setKey] = useState(0)

    // 当src变化时重置播放器
    useEffect(() => {
        if (src) {
            setKey(prev => prev + 1)
            setIsPlaying(false)
            setCurrentTime(0)
            setDuration(0)
        }
    }, [src])

    const handleLoadedMetadata = (e) => {
        setDuration(e.detail.duration)
    }

    const togglePlay = () => {
        if (isPlaying) {
            videoRef.current?.pause()
        } else {
            videoRef.current?.play()
        }
        setIsPlaying(!isPlaying)
    }

    const toggleFullscreen = () => {
        videoRef.current?.requestFullScreen({ direction: 0 })
        setIsFullscreen(!isFullscreen)
    }

    const sendDanmu = () => {
        if (inputDanmu.trim()) {
            setDanmuList([...danmuList, inputDanmu])
            setInputDanmu('')
        }
    }

    const formatTime = (seconds) => {
        const min = Math.floor(seconds / 60)
        const sec = Math.floor(seconds % 60)
        return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
    }

    return (
        <View className={`video-container ${isFullscreen ? 'fullscreen' : ''}`}>
            <Video
                key={`video-${key}`}
                ref={videoRef}
                src={src}
                className="video-player"
                controls={false}
                danmuList={danmuList}
                onTimeUpdate={(e) => setCurrentTime(e.detail.currentTime)}
                onLoadedMetadata={handleLoadedMetadata}
                autoplay={false}
            />

            <View className="controls-container">
                <View className="control-btn" onClick={togglePlay}>
                    <AtIcon name={isPlaying ? 'pause' : 'play'} size={20} color="#fff" />
                </View>

                <View className="progress-bar">
                    <View
                        className="progress"
                        style={{ width: `${duration ? (currentTime / duration) * 100 : 0}%` }}
                    />
                </View>

                <Text className="time-text">
                    {formatTime(currentTime)} / {formatTime(duration)}
                </Text>

                <View className="control-btn" onClick={toggleFullscreen}>
                    <AtIcon
                        name={isFullscreen ? 'compress' : 'expand'}
                        size={20}
                        color="#fff"
                    />
                </View>
            </View>
        </View>
    )
}

export default VideoPlayer